import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
import { Router } from '@angular/router';

import { NzModalService } from 'ng-zorro-antd';
import { UserInfoComponent } from '../userinfo-component/userinfo-component.component';
import { ChangeBelongComponent } from '../changebelong-component/changebelong-component.component';

@Component({
  selector: 'app-user-component',
  templateUrl: './user-component.component.html',
  styleUrls: ['./user-component.component.less']
})
export class UserComponent implements OnInit {
  menuItem: string;

  searchForm: FormGroup;
  // 便于控制
  controlArray = [];
  controlArrayOriginal = [
    {
      name: '帐号',
      controlname: 'account',
      placeholder: '请输入帐号',
      type: 'input',
      show: true
    }, {
      name: '姓名',
      controlname: 'name',
      placeholder: '请输入用户姓名',
      type: 'input',
      show: true
    }, {
      name: '身份证号',
      controlname: 'idcard',
      placeholder: '请输入身份证号',
      type: 'input',
      show: true
    }, {
      name: '手机号',
      controlname: 'phonenumber',
      placeholder: '请输入手机号',
      type: 'input',
      show: true
    }, {
      name: '账户状态',
      controlname: 'accountstate',
      placeholder: '账户状态',
      type: 'select',
      show: false
    }, {
      name: '销售',
      controlname: 'sale',
      placeholder: '请输入销售',
      type: 'input',
      show: false
    }, {
      name: '会员',
      controlname: 'member',
      placeholder: '请输入会员',
      type: 'input',
      show: false
    }, {
      name: '运营',
      controlname: 'operate',
      placeholder: '请输入运营',
      type: 'input',
      show: false
    }, {
      name: '开始时间',
      controlname: 'starttime',
      placeholder: '请选择开始时间',
      type: 'date',
      show: false,
      show_ca: false,
    }, {
      name: '结束时间',
      controlname: 'endtime',
      placeholder: '请选择结束时间',
      type: 'date',
      show: false,
      show_ca: false,
    }
  ];

  isCollapse = true;

  dataSet = [
    {
      key: '1',
      name: 'John Brown',
      age: 32,
      address: 'New York Park',
    },
    {
      key: '2',
      name: 'Jim Green',
      age: 40,
      address: 'London Park',
    },
    {
      key: '1',
      name: 'John Brown',
      age: 32,
      address: 'New York Park',
    },
    {
      key: '2',
      name: 'Jim Green',
      age: 40,
      address: 'London Park',
    },
    {
      key: '1',
      name: 'John Brown',
      age: 32,
      address: 'New York Park',
    },
    {
      key: '2',
      name: 'Jim Green',
      age: 40,
      address: 'London Park',
    },
    {
      key: '1',
      name: 'John Brown',
      age: 32,
      address: 'New York Park',
    },
    {
      key: '2',
      name: 'Jim Green',
      age: 40,
      address: 'London Park',
    },
    {
      key: '1',
      name: 'John Brown',
      age: 32,
      address: 'New York Park',
    },
    {
      key: '2',
      name: 'Jim Green',
      age: 40,
      address: 'London Park',
    },
    {
      key: '1',
      name: 'John Brown',
      age: 32,
      address: 'New York Park',
    },
    {
      key: '2',
      name: 'Jim Green',
      age: 40,
      address: 'London Park',
    },
    {
      key: '1',
      name: 'John Brown',
      age: 32,
      address: 'New York Park',
    },
    {
      key: '2',
      name: 'Jim Green',
      age: 40,
      address: 'London Park',
    },
    {
      key: '1',
      name: 'John Brown',
      age: 32,
      address: 'New York Park',
    },
    {
      key: '2',
      name: 'Jim Green',
      age: 40,
      address: 'London Park',
    },
    {
      key: '1',
      name: 'John Brown',
      age: 32,
      address: 'New York Park',
    },
    {
      key: '2',
      name: 'Jim Green',
      age: 40,
      address: 'London Park',
    },
    {
      key: '1',
      name: 'John Brown',
      age: 32,
      address: 'New York Park',
    },
    {
      key: '2',
      name: 'Jim Green',
      age: 40,
      address: 'London Park',
    },
    {
      key: '1',
      name: 'John Brown',
      age: 32,
      address: 'New York Park',
    },
    {
      key: '2',
      name: 'Jim Green',
      age: 40,
      address: 'London Park',
    },
  ];

  constructor(
    private fb: FormBuilder,
    private router: Router,
    private nzModalService: NzModalService
  ) { }

  ngOnInit() {
    this.initSearchForm();
    this.controlArray = JSON.parse(JSON.stringify(this.controlArrayOriginal));
    this.menuItem = this.router.url.slice(this.router.url.lastIndexOf('/') + 1);
    switch (this.menuItem) {
      case 'customer':
        break;
      case 'sale':
        this.searchForm.removeControl('sale');
        this.controlArray.splice(5, 1);
        break;
      case 'member':
        this.searchForm.removeControl('sale');
        this.searchForm.removeControl('member');
        this.controlArray.splice(5, 2);
        break;
      case 'operate':
        this.searchForm.removeControl('sale');
        this.searchForm.removeControl('member');
        this.searchForm.removeControl('operate');
        this.controlArray.splice(5, 3);
        break;
      default: break;
    }
  }

  /**
   * 初始化搜索菜单选项
   * 客户：sale operate member
   * 销售：operate member
   * 会员：operate
   * 运营：无
   */
  initSearchForm() {
    this.searchForm = this.fb.group({
      'account': [],
      'name': [],
      'idcard': [],
      'phonenumber': [],
      'accountstate': [],
      'sale': [],
      'member': [],
      'operate': [],
      'starttime': [new Date(new Date().valueOf() - 1000 * 60 * 60 * 24 * 7)],
      'endtime': [new Date()]
    });
    document.body.addEventListener('click', () => {
      this.controlArray.forEach(element => {
        if (element.type == 'date') {
          element.show_ca = false;
        }
      });
    });
  }

  /**
   * 初始化表格选项
   */
  initTable() {

  }

  toggleCollapse(): void {
    this.isCollapse = !this.isCollapse;
    this.controlArray.forEach((c, index) => {
      c.show = this.isCollapse ? (index < 4) : true;
    });
  }

  resetForm(): void {
    this.searchForm.reset();
  }

  editUserInfo(state: boolean): void {
    this.nzModalService.create({
      nzTitle: state ? '添加用户' : '编辑用户',
      nzWidth: 900,
      nzContent: UserInfoComponent,
      nzComponentParams: {
        isregister: state
      }
    });
  }

  changeBelong() {
    this.nzModalService.create({
      nzTitle: '更改上级',
      nzContent: ChangeBelongComponent,
      nzComponentParams: {}
    });
  }

  show_ca(e: Event, ctrl) {
    e.cancelBubble = true;
    ctrl.show_ca = true;
  }

}
